<template>
	<view>

		<view class="example">
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item name="value">
					<uni-data-checkbox v-model="formData.value" :localdata="formData.range" @change="change"
						class="checkBox" selectedColor="#0ABA94"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="投诉内容" name="content" label-width='80' label-position='top'>
					<uni-easyinput class="contentArea" type="textarea" v-model="formData.content"
						placeholder="请输入投诉内容" />
				</uni-forms-item>
			</uni-forms>
			<button class="button" @click="submit">提交</button>
		</view>

	</view>
</template>

<script>
	import requestHttp from '@/providers/essential/httpService.js'
	import api from '@/providers/API/api.js'
	export default {
		data() {
			return {

				formData: {
					value: 0,
					range: [{
						"value": 0,
						"text": "投诉"
					}, {
						"value": 1,
						"text": "建议"
					}],
					content: ''
				},
				rules: {
					value: {
						rules: [{
							required: true,
							errorMessage: '请选择投诉或建议',
						}]
					},
					content: {
						rules: [{
							required: true,
							errorMessage: '请输入投诉内容',
						}]
					}
				},
			}
		},
		methods: {
			change(e) {
				console.log('e:', e);
			},
			submit() {
				this.$refs.form.validate().then(res => {
					if (res) {
						this.createSuggestion(res)
					}
					console.log('表单数据信息：', res);
				}).catch(err => {
					console.log('表单错误信息：', err);
				})


			},
			createSuggestion(res) {
				let url = api.createSuggestion
				console.log(api.createSuggestion, 'createSuggestion')
				let data = {
					type: res.value,
					content: res.content,
					status: "1"
				}
				requestHttp.postData(url, data).then((res) => {
					console.log(res, 'res')
					if (res) {
						if (res.code == 200) {} else if (res.msg) {
							uni.showToast({
								title: res.msg, //显示的文字 
							})
						}
					} else {
						uni.showToast({
							title: '系统错误', //显示的文字 
						})
					}
				})
			},
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
	}
</script>

<style>
	.example {
		/* width: 100%; */
		padding: 20rpx;
		background-color: #fff;
	}

	.checkBox {
		margin: 40rpx;
	}

	.form-item {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.button {
		position: fixed;
		bottom: 80rpx;
		left: 10%;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80%;
		/* margin: 56upx auto; */
		background-color: #0ABA94;
		color: #FFFFFF;
		font-size: 32upx;
		border-radius: 40rpx;
		height: 80rpx;
	}

	.contentArea {
		/* width: 60%; */
	}
</style>
